<template>
    <div class="content">
        <div class="content-left">
            <div class="list">
                <div class="list-left">
                    <div class="l1">
                        <div class="pic">
                            <img src="https://preview.axure6.com/194/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u4_selected.svg" alt="">
                        </div>
                        <p>工作台</p>
                    </div>
                   
                </div>
            </div>
            <div class="list1">
                <div class="list-left">
                    <div class="l1">
                        <div class="pic">
                            <img src="https://preview.axure6.com/194/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u7.svg" alt="">
                        </div>
                        <p>日程待办</p>
                    </div>
                   
                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="nei-content">
                <div class="title">
                    <p><span style="color: #999999;">首页 > </span><span>工作台</span></p>
                </div>
                <div class="author">
                    <p><span>👏</span><span>早上好，李婷！</span></p>
                </div>
                <div class="staff">
                    <p class="title">员工概况</p>
                    <div class="main-content">
                        <div class="item">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u701.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>10</span><span>,</span><span>000</span></div>
                                </div>
                                <div class="txt">在职员工</div>
                            </div>
                        </div>
                        <div class="item1">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u708.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>80</span></div>
                                </div>
                                <div class="txt">待入职员工</div>
                            </div>
                        </div>
                        <div class="item2">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u715.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>100</span></div>
                                </div>
                                <div class="txt">试用期员工</div>
                            </div>
                        </div>
                        <!-- 正式员工 -->
                        <div class="item3">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u722.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>8905</span></div>
                                </div>
                                <div class="txt">正式员工</div>
                            </div>
                        </div>
                        <!-- 代离职员工 -->
                        <div class="item4">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u729.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>44</span></div>
                                </div>
                                <div class="txt">待离职员工</div>
                            </div>
                        </div>
                        <!-- 已离职员工 -->
                        <div class="item5">
                            <div class="item-pic">
                                <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u696.svg" alt="">
                            </div>
                            <div class="item-main">
                                <div class="main-pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u736.svg" alt=""></div>
                                <div class="main-num">
                                    <div class="top"><span>609</span></div>
                                </div>
                                <div class="txt">已离职员工</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表格 -->
                <div class="echar">
                    <Hpechar></Hpechar>
                    <Hpdata></Hpdata>
                    <Hprightechar></Hprightechar>
                </div>
                <!-- 最下边的 -->
                <div class="bottom">
                    <Hpbottomleft></Hpbottomleft>
                    <Hpbottommiddle></Hpbottommiddle>
                    <Hpbottomright></Hpbottomright>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Hpechar from '@/components/Hpechar.vue'
import Hpdata from '@/components/Hpdata.vue'
import Hprightechar from '@/components/Hprightechar.vue'
import Hpbottomleft from '@/components/Hpbottomleft.vue'
import Hpbottommiddle from './Hpbottommiddle.vue'
import Hpbottomright from './Hpbottomright.vue'
export default {
    components:{
        Hpechar,
        Hpdata,
        Hprightechar,
        Hpbottomleft,
        Hpbottommiddle,
        Hpbottomright
    }
}
</script>

<style lang="scss" scoped>
.content{
    margin-top: 60px;
    display: flex;
    overflow-x: hidden;
    .content-left{
        position: fixed;
        width: 200px;
        height: 875px;
        background-color: rgba(255, 255, 255, 1);
        // height: 392px;
        .list{
            margin: 20px 0 0 10px;
            // padding: 10px 0 0 10px;
            // display: flex;
            width: 180px;
            height: 36px;
            box-sizing: border-box;
            font-size: 13px;
            color: #333333;
            background-color: rgba(37, 97, 239, 1);
            border: none;
            border-radius: 4px;
            .list-left{
                // display: flex;
                
                font-size: 13px;
                padding: 10px 0 0 10px;
                .l1{
                    color: rgb(255, 255, 255);
                    display: flex;
                    p{
                        margin: 1px 0 0 10px;
                    }
                }
                .l2{
                    color: #333333;
                    display: flex;
                    p{
                        margin: -1px 0 0 10px;
                    }
                }
                
            }
        }
        .list1{
            margin: 10px 0 0 10px;
            // padding: 10px 0 0 10px;
            // display: flex;
            width: 180px;
            height: 36px;
            box-sizing: border-box;
            font-size: 13px;
            color: #333333;
            background-color: rgba(255, 255, 255, 0.0980392156862745);
            border: none;
            border-radius: 4px;
            .list-left{
                font-size: 13px;
                padding: 10px 0 0 10px;
                .l1{
                    color: #333333;
                    display: flex;
                    p{
                        margin: 2px 0 0 10px;
                    }
                }
                
                
            }
        }
    }
    .content-right{
        width: 1720px;
        margin: 0 0 0 200px;
        background-color: rgb(242,243,245);
        .nei-content{
            position: relative;
            width: 1360px;
            margin: 0 auto;
            z-index: 0;
            .title{
                margin-top: 20px;
                text-align: left;
                font-weight: 400;
                font-style: normal;
                font-size: 13px;
            }
            .author{
                margin-top: 30px;
                width: 172px;
                height: 27px;
                font-size: 20px;
                color: rgba(51, 51, 51, 0.898039215686275);
            }
            .staff{
                margin-top: 20px;
                width: 1360px;
                height: 237px;
                padding-left: 20px;
                background-color: rgba(255, 255, 255, 1);
                box-sizing: border-box;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(242, 242, 242, 1);
                border-radius: 8px;
                box-shadow: 0px 10px 30px rgba(228, 228, 228, 0.498039215686275);
                .title{
                    font-weight: 500;
                    font-style: normal;
                    font-size: 16px;
                }
                .main-content{
                    // display: flex;
                    .item{
                        position: relative;
                        .item-pic{
                            position: absolute;
                            left: -40px;
                        }
                        .item-main{
                            position: absolute;
                            top: 15px;
                            left: 66px;
                            padding: 0 15px;
                            justify-content: center;
                            box-sizing: border-box;
                            .main-pic{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 40px;
                                height: 40px;
                                background: inherit;
                                background-color: rgba(37, 97, 239, 1);
                                border: none;
                                border-radius: 12px;
                            }
                            .main-num{
                                font-weight: 700;
                                width: 74px;
                                height: 32px;
                                margin-left: -20px;
                                font-size: 24px;
                                line-height: 32px;
                                .top{
                                    margin-top: 7px;
                                    text-align: center;
                                }
                            }
                            .txt{
                                margin-left: -14px;
                                font-weight: 400;
                                font-style: normal;
                                font-size: 12px;
                                color: #999999;
                                line-height: 32px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.item-pic{
            position: absolute;
            left: -40px;
        }
.item-main{
    position: absolute;
    top: 15px;
    left: 66px;
    padding: 0 15px;
    justify-content: center;
    box-sizing: border-box;
    .main-pic{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: inherit;
        background-color: rgba(102, 110, 232, 1);
        border: none;
        border-radius: 12px;
    }
    .main-num{
        font-weight: 700;
        width: 74px;
        height: 32px;
        margin-left: -20px;
        font-size: 24px;
        line-height: 32px;
        .top{
            margin-top: 7px;
            text-align: center;
        }
    }
    .txt{
        margin-left: -14px;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        line-height: 32px;
    }
}
.item1{
    position: relative;
    left: 220px;
}
.item2{
    position: relative;
    left: 440px;
    .main-pic{
        background-color: rgba(61, 212, 167, 1);
    }
}
.item3{
    position: relative;
    left: 660px;
    .main-pic{
        background-color: rgba(250, 116, 107, 1);
    }
}
.item4{
    position: relative;
    left: 880px;
    .main-pic{
        background-color: rgba(253, 219, 120, 1);
    }
}
.item5{
    position: relative;
    left: 1100px;
    .main-pic{
        background-color: rgba(204, 204, 204, 1);
    }
}
.echar{
    margin-top: 23px;
    display: flex;
    justify-content: space-between;
}
.bottom{
    margin-top: 23px;
    display: flex;
    justify-content: space-between;
}
</style>